<template>
    <div class="bookPage" @click="clickPage" ref="bookPage">


        <transition :name="transitionName">
            <div v-show="page2Show" class="page overflowHidden" :style="Book.bookRead.colors[setup.bookRead.theme].page" ref="page2">
                <div class="fictionName" @click.stop="$router.back(-1);$router.isBack = true">
                    <van-icon name="arrow-left" />
                    {{ Book.bookRead.poi == 0 ? $route.query.fName : chapter.fictionChapter && 
                    chapter.fictionChapter.chapterName }}
                </div>
                <div class="box" :style="{height : offsetHeight + 'px'}">
                    <div class="content" 
                    :style="'font-size:' +  Book.bookRead.pageContent.fontSize + 'px;;line-height:' +  Book.bookRead.pageContent.lineHeight + 'px;letter-spcing:' +  Book.bookRead.pageContent.letterSpcing + 'px;'"
                    v-if="chapter.fictionChapter" ref="content2">
                        <h3>{{ chapter.fictionChapter.chapterName }}</h3>
                        <p v-for="(item,index) in chapter.contents" :key="index">
                            {{ item }}
                        </p>
                    </div>
                </div>
                <div>{{ Book.bookRead.poi + 1 }}/{{ Book.bookRead.pageLength }}</div>
            </div>
        </transition>

        <transition :name="transitionName">
            <div v-show="page1Show" class="page overflowHidden"
            :style="'left : ' + page1Letf + '%;background:' + Book.bookRead.colors[setup.bookRead.theme].page.background + ';color:' + Book.bookRead.colors[setup.bookRead.theme].page.color"
            ref="page1">
                <div class="fictionName" @click.stop="$router.back(-1);$router.isBack = true">
                    <van-icon name="arrow-left" />
                    {{ Book.bookRead.poi == 0 ? $route.query.fName : chapter.fictionChapter && 
                    chapter.fictionChapter.chapterName }}
                </div>
                <div class="box" :style="{height : offsetHeight + 'px'}">
                    <div class="content" id="filter"
                    :style="'font-size:' +  Book.bookRead.pageContent.fontSize + 'px;line-height:' +  Book.bookRead.pageContent.lineHeight + 'px;letter-spcing:' +  Book.bookRead.pageContent.letterSpcing + 'px;'"
                     v-if="chapter.fictionChapter" ref="content1">
                        <h3 :class="{active : isSpeechTTs && -1 == listenIndex}">{{ chapter.fictionChapter.chapterName }}</h3>
                        <p
                        :id="'p' + index"
                        v-for="(item,index) in chapter.contents" :key="index" :class="{active : isSpeechTTs && index == listenIndex}">
                            {{ item }}
                        </p>
                    </div>
                </div>
                <div>{{ Book.bookRead.poi + 1 }}/{{ Book.bookRead.pageLength }}</div>
            </div>
        </transition>
        

    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    props : ['chapter', 'isSpeechTTs', 'listenIndex'],
    data() {
        return {
            poh : 0,
            pow : 0,

            offsetHeight : 0,//content可见区域高度
            offsetWidth : 0,//content可见区域宽度

            pois : 1,

            page1 : null,
            page2 : null,

            page1Letf : 0,

            transitionName : 'nextPage',
            
            page1Show : true,
            page2Show : true,
            
            middleW : 100,//中间点击区域宽度
            middleH : 150,//中间点击区域高度

            textNum : 0,//文字宽度
            textHeight : 32,//文字高度

            content1 : null,//content1
            content2 : null,//content2
            scrollHeight : 0,//

            isAnimation : null,//当前播放的动画
            fn2 : () => {}
        }
    },
    computed : {
        ...mapState(['Book', 'setup'])
    },
    created(){
        this.$on('init', this.initAftr)
        this.$on('pageNextPage', this.nextPage)
        this.$on('pageUpperPage', this.upperPage)
        this.$on('checkListenPage', this.checkListenPage)
        this.$on('getListenPage', this.getListenPage)
    },
    mounted(){
        // this.initAftr()
    },
    methods : {

        initAftr(){
            let self = this

            if(self.$refs.content1){
                self.$refs.content1.style.height = '0px'
            }
            self.page1Show = true
            self.page2Show = true
            self.poh = (self.$refs.bookPage.offsetHeight - this.middleH) / 2
            self.pow = (self.$refs.bookPage.offsetWidth - this.middleW) / 2

            self.$nextTick(() => {
                function initAftr() {
                    if (self.$refs.content1) {
                        self.init()
                    }else{
                        setTimeout(() => {
                            initAftr()
                        }, 50)
                    }
                }
                initAftr()
            })
        },

        init(data){

            if(!this.$refs.content1){
                return
            }

            this.content1 = this.$refs.content1
            this.content2 = this.$refs.content2

            this.scrollHeight = this.$refs.content1.scrollHeight

            let w = this.Book.bookRead.pageContent.lineHeight

            this.offsetHeight = Math.floor((this.$refs.bookPage.offsetHeight - 100) / w) * w

            // 计算一共有多少页
            this.Book.bookRead.pageLength = Math.ceil(this.scrollHeight / this.offsetHeight)

            this.content1.style.height = this.scrollHeight + 'px'

            this.$emit('afterInit')

            this.content1.style.top = - (this.Book.bookRead.poi * this.offsetHeight) + 'px'
            this.content2.style.top = - (this.Book.bookRead.poi * this.offsetHeight) + 'px'
        },

        // 检查当前阅读进度是第几页
        checkListenPage(){
            let p = document.getElementById('p' + this.listenIndex)
            if (!p) {
                return
            }
            let top = p.getBoundingClientRect().top
            if(top + p.scrollHeight > this.offsetHeight){
                this.Book.bookRead.poi++
                this.content1.style.top = - (this.Book.bookRead.poi * this.offsetHeight) + 'px'
                this.content2.style.top = - (this.Book.bookRead.poi * this.offsetHeight) + 'px'
                this.$emit('updateBookPoi')
            }
        },

        //获取当前阅读进度的行
        getListenPage(fn = function(){}){
            if (this.Book.bookRead.poi == 0) {
                return fn(-1)
            }
            for (let index = 0; index < this.chapter.contents.length; index++) {
                let top = document.getElementById('p' + index).getBoundingClientRect().top
                if (top >= 0) {
                    return fn(index)
                }
            }
        },

        // 页面被点击
        clickPage(e){

            let x = e.clientX
            let y = e.clientY

            if(x < this.pow || y < this.poh){
                this.upperPage()
            }else if(this.pow + this.middleW < x || this.poh + this.middleH < y){
                this.nextPage()
            }else{
                this.$emit('clickPage', e)
            }
        },
        // 下一页
        nextPage(){
            this.transitionName = 'nextPage'
            if(this.Book.bookRead.poi + 1 < this.Book.bookRead.pageLength){
                this.Book.bookRead.poi++
                this.animation(() => {
                    this.page1Show = false
                    this.content2.style.top = - (this.Book.bookRead.poi * this.offsetHeight) + 'px'
                },() => {
                    this.page1Show = true
                    this.content1.style.top = - (this.Book.bookRead.poi * this.offsetHeight) + 'px'
                })
                this.$emit('updateBookPoi')
            }else{
                this.$emit('nextPage', () => {
                    this.animation(() => {
                        this.page1Show = false
                        this.page2Show = false
                    },() => {
                        this.transitionName = ''
                    })
                })
            }
        },

        // 上一页
        upperPage(){
            this.transitionName = 'upperPage'
            if(this.Book.bookRead.poi > 0){
                this.Book.bookRead.poi--
                this.animation(() => {
                    this.page1Show = false
                    this.page1Letf = -100
                    this.content1.style.top = - (this.Book.bookRead.poi * this.offsetHeight) + 'px'
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.content2.style.top = - (this.Book.bookRead.poi * this.offsetHeight) + 'px'
                        }, 300)
                    })
                },() => {
                    this.page1Letf = 0
                    this.page1Show = true
                })
                this.$emit('updateBookPoi')
            }else{
                this.$emit('upperPage', () => {
                    this.animation(() => {
                        this.page1Show = false
                        this.page2Show = false
                    })
                })
            }
        },

        // 转场动画
        animation(fn1, fn2 = ()=>{}, mi = 700){
            if(this.isAnimation != null){
                clearTimeout(this.isAnimation)
                this.fn2()
                this.$nextTick(() => {
                    fn1()
                    this.$nextTick(() => {
                        this.isAnimation = setTimeout(() => {
                            this.isAnimation = null
                            fn2()
                        }, mi)
                    })
                })
            }else{
                fn1()
                this.$nextTick(() => {
                    this.isAnimation = setTimeout(() => {
                        this.isAnimation = null
                        fn2()
                    }, mi)
                })
            }
            this.fn2 = fn2
        },
    }
}
</script>

<style scoped>
.bookPage{
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.page{
    position: absolute;
    top: 0px;
    left: 0px;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    padding: 10px;
    overflow-y: scroll;
}
.tran.page{
    left: -100%;
}
.page.overflowHidden .box{
    overflow: hidden;
}
.fictionName{
    height: 20px;
    width: 100%;
}
.box{
    position: relative;
    width: 100%;
    margin: 20px 0;
}
.content{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.upperPage-leave-active,
.nextPage-leave-active {
  transition: transform 0.7s;
  box-shadow: 0px 10px 30px rgb(0, 0, 0);
}

.nextPage-leave-to {
  transform: translateX(-100%);
}
.nextPage-enter{
  transform: translateX(100%);
}

.upperPage-leave-to {
  transform: translateX(100%);
}
.upperPage-enter{
  transform: translateX(-100%);
  /* Letter-spacing */
}

.active{
    color: rgb(163, 74, 15);
}
</style>